<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta content="关键词" name="keywords" />
    <meta content="关键描述" name="description" />
    <title>品优购</title>
    <!-- 初始化样式 -->
    <link rel="stylesheet" href="./css/base.css" />
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="./css/iconfont.css" />
    <!-- 引入网站的公用区域样式 -->
    <link rel="stylesheet" href="./css/common.css" />
    <!-- 引入favicon 图标 -->
    <link type="image/x-icon" rel="shortcut icon" href="./favicon.ico" />
    <!-- 引入自己的css -->
    <link rel="stylesheet" href="./css/index.css">
  </head>

  <body>
    <!-- 快捷导航开始  -->
    <div class="shortcut">
      <div class="w">
        <div class="short_left fl">
          品优购欢迎您！ <a href="./login.html">请登录</a>
          <a href="./reg.html" class="red">免费注册</a>
        </div>
        <div class="short_links fr">
          <a href="javascript:;">我的订单</a><span>|</span>
          <a href="javascript:;">我的品优购 <i class="iconfont">&#xe6b7;</i></a
          ><span>|</span> <a href="javascript:;">品优购会员</a><span>|</span>
          <a href="javascript:;">企业采购</a><span>|</span>
          <a href="javascript:;">关注品优购 <i class="iconfont">&#xe6b7;</i></a
          ><span>|</span>
          <a href="javascript:;">客户服务 <i class="iconfont">&#xe6b7;</i></a
          ><span>|</span>
          <a href="javascript:;">网站导航 <i class="iconfont">&#xe6b7;</i></a>
        </div>
      </div>
    </div>
    <!-- 快捷导航结束  -->
    <!-- header s -->
    <div class="header w">
      <!-- logo -->
      <div class="logo">
        <h1>
          <a href="./index.html">品优购</a>
        </h1>
      </div>
      <!-- search -->
      <div class="search">
        <form action="">
          <input type="text" class="fl" placeholder="语言开发" />
          <button class="fr">搜索</button>
        </form>
        <div class="hot_words">
          <a href="javascript:;" class="red">优惠购首发</a>
          <a href="javascript:;">亿元优惠</a>
          <a href="javascript:;">9.9元团购</a>
          <a href="javascript:;">美满99减30</a>
          <a href="javascript:;">办公用品</a>
          <a href="javascript:;">电脑</a>
          <a href="javascript:;">通信</a>
        </div>
      </div>
      <!-- shop_car -->
      <div class="shop_car">
        <div class="num">0</div>
        <span class="iconfont red">&#xe65e;</span>
        我的购物车
        <span class="iconfont">&#xe6b6;</span>
      </div>
    </div>
    <!-- header e -->

    <!-- nav s -->
    <div class="nav_w">
      <div class="w">
        <!-- 左侧 -->
        <div class="nav_left fl">
          <!-- hd -->
          <div class="hd">全部商品分类</div>
          <!-- bd -->
          <div class="bd" style="display:block">
            <ul>
              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>

              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="./list.html">手机</a>、
                <a href="./list.html">数码</a>、 <a href="./list.html">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="nav fl">
          <ul>
            <li><a href="javascript:;">服装城</a></li>
            <li><a href="javascript:;">美妆馆</a></li>
            <li><a href="javascript:;">传智超市</a></li>
            <li><a href="javascript:;">全球购</a></li>
            <li><a href="javascript:;">闪购</a></li>
            <li><a href="javascript:;">团购</a></li>
            <li><a href="javascript:;">拍卖</a></li>
            <li><a href="javascript:;">有趣</a></li>
          </ul>
        </div>
      </div>
    </div>
    <!-- main s -->
    <div class="w">
        <!-- main -->
        <div class="main">
            <!-- focus -->
            <div class="focus fl">
                <img src="./upload/focus1.png" alt="">
            </div>
            <!-- main_right -->
            <div class="main_right fr">
                <!-- 快报区域 -->
                <div class="news">
                    <!-- hd -->
                    <div class="hd">
                        <h3 class="fl">品优购快报</h3>
                        <a href="#" class="fr">更多 <span class="iconfont">&#xe6b6;</span></a>
                    </div>
                    <!-- bd -->
                    <div class="bd">
                        <ul>
                            <li><a href="#">[公告] 每日享折扣品优品质优欢迎抢购立马来抢</a></li>
                            <li><a href="#">[公告] 每日享折扣品优品质优欢迎抢购立马来抢</a></li>
                            <li><a href="#">[公告] 每日享折扣品优品质优欢迎抢购立马来抢</a></li>
                            <li><a href="#">[公告] 每日享折扣品优品质优欢迎抢购立马来抢</a></li>
                            <li><a href="#">[公告] 每日享折扣品优品质优欢迎抢购立马来抢</a></li>
                        </ul>
                    </div>
                </div>
                <!-- serice区域 -->
                <div class="serice">
                    <ul>
                        <li><a href="#"><div class="icon"></div><p>话费</p></a></li>
                        <li><a href="#"><div class="icon"></div><p>机票</p></a></li>
                        <li><a href="#"><div class="icon"></div><p>话费</p></a></li>
                        <li><a href="#"><div class="icon"></div><p>话费</p></a></li>
                        <li><a href="#"><div class="icon"></div><p>话费</p></a></li>
                        <li><a href="#"><div class="icon"></div><p>话费</p></a></li>
                        <li><a href="#"><div class="icon"></div><p>话费</p></a></li>
                        <li><a href="#"><div class="icon"></div><p>话费</p></a></li>
                        <li><a href="#"><div class="icon"></div><p>话费</p></a></li>
                        <li><a href="#"><div class="icon"></div><p>话费</p></a></li>
                        <li><a href="#"><div class="icon"></div><p>话费</p></a></li>
                        <li><a href="#"><div class="icon"></div><p>话费</p></a></li>
                    </ul>
                </div>
                <!-- margin -->
                <div class="bargin">
                    <a href="#"><img src="./upload/bargain.png" alt=""></a>
                </div>
            </div>
        </div>
    </div>
    <!-- main e -->

    <!-- 推荐模块  开始 -->
    <div class="recom w">
        <!-- 左边 -->
        <div class="rec_left fl">
            <img src="./img/recom.png" alt="">
        </div>
        <!-- 右边 -->
        <div class="rec_right fl">
            <ul>
                <li><a href="#"><img src="./upload/recom_03.jpg" alt=""></a></li>
                <li><a href="#"><img src="./upload/recom_03.jpg" alt=""></a></li>
                <li><a href="#"><img src="./upload/recom_03.jpg" alt=""></a></li>
                <li><a href="#"><img src="./upload/recom_03.jpg" alt=""></a></li>
            </ul>
        </div>
    </div>
    <!-- 推荐模块  结束 -->

     <!-- 猜你喜欢 开始 -->
     <div class="like w">
      <!-- 头部 -->
      <div class="box_hd clearfix">
        <!-- 左侧 -->
        <h3>猜你喜欢</h3>
         <!-- 右侧 -->
        <a href="#">换一批</a>
       
      </div>
      <!-- 身体 -->
      <div class="box_bd">
        <ul class="box_item clearfix">
          <li>
            <!-- 图片 -->
            <div class="pic"><img src="./upload/pic1.png" alt="" /></div>
            <!-- 文字 -->
            <div class="txt">
              <h4>阳光美包<br />时尚子母包</h4>
              <p><span>￥</span>116.00</p>
            </div>
          </li>
          <li>
            <!-- 图片 -->
            <div class="pic"><img src="./upload/pic1.png" alt="" /></div>
            <!-- 文字 -->
            <div class="txt">
              <h4>阳光美包<br />时尚子母包</h4>
              <p><span>￥</span>116.00</p>
            </div>
          </li>
          <li>
            <!-- 图片 -->
            <div class="pic"><img src="./upload/pic1.png" alt="" /></div>
            <!-- 文字 -->
            <div class="txt">
              <h4>阳光美包<br />时尚子母包</h4>
              <p><span>￥</span>116.00</p>
            </div>
          </li>
          <li>
            <!-- 图片 -->
            <div class="pic"><img src="./upload/pic1.png" alt="" /></div>
            <!-- 文字 -->
            <div class="txt">
              <h4>阳光美包<br />时尚子母包</h4>
              <p><span>￥</span>116.00</p>
            </div>
          </li>
          <li>
            <!-- 图片 -->
            <div class="pic"><img src="./upload/pic1.png" alt="" /></div>
            <!-- 文字 -->
            <div class="txt">
              <h4>阳光美包<br />时尚子母包</h4>
              <p><span>￥</span>116.00</p>
            </div>
          </li>
          <li>
            <!-- 图片 -->
            <div class="pic"><img src="./upload/pic1.png" alt="" /></div>
            <!-- 文字 -->
            <div class="txt">
              <h4>阳光美包<br />时尚子母包</h4>
              <p><span>￥</span>116.00</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 猜你喜欢结束 -->

    <!-- 楼层区域开始 -->
    <div class="floor">
      <!-- 版心盒子套上下两个盒子 -->
      <div class="w">
        <!-- floor_hd -->
        <div class="floor_hd">
          <h3 class="fl">家用电器</h3>
          <div class="links fr">
            <a href="javascript:;" class="red">热门</a><span>|</span>
            <a href="javascript:;">大家电</a><span>|</span>
            <a href="javascript:;">生活电器</a><span>|</span>
            <a href="javascript:;">厨房电器</a><span>|</span>
            <a href="javascript:;">个护健康</a><span>|</span>
            <a href="javascript:;">应季电器</a><span>|</span>
            <a href="javascript:;">空气/净水</a><span>|</span>
            <a href="javascript:;">新奇特</a><span>|</span>
            <a href="javascript:;">高端电器</a>
          </div>
        </div>
        <!-- floor_bd -->
        <div class="floor_bd">
          <div class="pr_list clearfix">
            <div class="w209 fl">
              <!-- 上面 -->
              <ul class="lis clearfix">
                <li>空气净化器</li>
                <li>空气净化器</li>
                <li>空气净化器</li>
                <li>空气净化器</li>
                <li>空气净化器</li>
                <li>空气净化器</li>
              </ul>
              <!-- 下面 -->
              <a href="#"><img src="./upload/floor-1-1.png" alt=""></a>
            </div>
            <div class="w329 fl">
              <a href="javascript:;"><img src="./upload/floor-1-b01.png" alt=""></a>
            </div>
            <div class="w219 fl">
              <a href="javascript:;" class="b-bottom"><img src="./upload/floor-1-2.png" alt=""></a>
              <a href="javascript:;"><img src="./upload/floor-1-3.png" alt=""></a>
            </div>
            <div class="w220 fl">
              <a href="javascript:;"><img src="./upload/floor-1-4.png" alt=""></a>
            </div>
            <div class="w219 fl">
              <a href="javascript:;" class="b-bottom"><img src="./upload/floor-1-5.png" alt=""></a>
              <a href="javascript:;"><img src="./upload/floor-1-6.png" alt=""></a>
            </div>
          </div>
          <!-- ad -->
          <div class="pr_ad">
            <a href="#"><img src="./upload/logo10.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#" class="last"><img src="./upload/logo11.png" alt=""></a>
          </div>
        </div>
      </div>
    </div>
    <!-- 楼层区域结束 -->

    <!-- 手机通讯 开始-->
    <div class="floor">
      <!-- 版心盒子套上下两个盒子 -->
      <div class="w">
        <!-- floor_hd -->
        <div class="floor_hd">
          <h3 class="fl">手机通讯</h3>
          <div class="links fr">
            <a href="javascript:;" class="red">热门</a><span>|</span>
            <a href="javascript:;">大家电</a><span>|</span>
            <a href="javascript:;">生活电器</a><span>|</span>
            <a href="javascript:;">厨房电器</a><span>|</span>
            <a href="javascript:;">个护健康</a><span>|</span>
            <a href="javascript:;">应季电器</a><span>|</span>
            <a href="javascript:;">空气/净水</a><span>|</span>
            <a href="javascript:;">新奇特</a><span>|</span>
            <a href="javascript:;">高端电器</a>
          </div>
        </div>
        <!-- floor_bd -->
        <div class="floor_bd">
          <div class="pr_list clearfix">
            <div class="w209 fl">
              <!-- 上面 -->
              <ul class="lis clearfix">
                <li>空气净化器</li>
                <li>空气净化器</li>
                <li>空气净化器</li>
                <li>空气净化器</li>
                <li>空气净化器</li>
                <li>空气净化器</li>
              </ul>
              <!-- 下面 -->
              <a href="#"><img src="./upload/floor-1-1.png" alt=""></a>
            </div>
            <div class="w329 fl">
              <a href="javascript:;"><img src="./upload/floor-1-b01.png" alt=""></a>
            </div>
            <div class="w219 fl">
              <a href="javascript:;" class="b-bottom"><img src="./upload/floor-1-2.png" alt=""></a>
              <a href="javascript:;"><img src="./upload/floor-1-3.png" alt=""></a>
            </div>
            <div class="w220 fl">
              <a href="javascript:;"><img src="./upload/floor-1-4.png" alt=""></a>
            </div>
            <div class="w219 fl">
              <a href="javascript:;" class="b-bottom"><img src="./upload/floor-1-5.png" alt=""></a>
              <a href="javascript:;"><img src="./upload/floor-1-6.png" alt=""></a>
            </div>
          </div>
          <!-- ad -->
          <div class="pr_ad">
            <a href="#"><img src="./upload/logo10.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#" class="last"><img src="./upload/logo11.png" alt=""></a>
          </div>
        </div>
      </div>
    </div>
    <!-- 手机通讯 结束 -->
    <!-- 电脑办公开始 -->
    <div class="floor">
      <!-- 版心盒子套上下两个盒子 -->
      <div class="w">
        <!-- floor_hd -->
        <div class="floor_hd">
          <h3 class="fl">电脑办公</h3>
          <div class="links fr">
            <a href="javascript:;" class="red">热门</a><span>|</span>
            <a href="javascript:;">大家电</a><span>|</span>
            <a href="javascript:;">生活电器</a><span>|</span>
            <a href="javascript:;">厨房电器</a><span>|</span>
            <a href="javascript:;">个护健康</a><span>|</span>
            <a href="javascript:;">应季电器</a><span>|</span>
            <a href="javascript:;">空气/净水</a><span>|</span>
            <a href="javascript:;">新奇特</a><span>|</span>
            <a href="javascript:;">高端电器</a>
          </div>
        </div>
        <!-- floor_bd -->
        <div class="floor_bd">
          <div class="pr_list clearfix">
            <div class="w209 fl">
              <!-- 上面 -->
              <ul class="lis clearfix">
                <li>空气净化器</li>
                <li>空气净化器</li>
                <li>空气净化器</li>
                <li>空气净化器</li>
                <li>空气净化器</li>
                <li>空气净化器</li>
              </ul>
              <!-- 下面 -->
              <a href="#"><img src="./upload/floor-1-1.png" alt=""></a>
            </div>
            <div class="w329 fl">
              <a href="javascript:;"><img src="./upload/floor-1-b01.png" alt=""></a>
            </div>
            <div class="w219 fl">
              <a href="javascript:;" class="b-bottom"><img src="./upload/floor-1-2.png" alt=""></a>
              <a href="javascript:;"><img src="./upload/floor-1-3.png" alt=""></a>
            </div>
            <div class="w220 fl">
              <a href="javascript:;"><img src="./upload/floor-1-4.png" alt=""></a>
            </div>
            <div class="w219 fl">
              <a href="javascript:;" class="b-bottom"><img src="./upload/floor-1-5.png" alt=""></a>
              <a href="javascript:;"><img src="./upload/floor-1-6.png" alt=""></a>
            </div>
          </div>
          <!-- ad -->
          <div class="pr_ad">
            <a href="#"><img src="./upload/logo10.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#"><img src="./upload/logo11.png" alt=""></a>
            <a href="#" class="last"><img src="./upload/logo11.png" alt=""></a>
          </div>
        </div>
      </div>
    </div>
    <!-- 电脑办公结束 -->
    <!-- nav e -->
    <div class="footer">
      <div class="w">
             <!-- foot_up -->
        <div class="foot_up">
            <ul>
              <li>
                <div class="icon"></div>
                <h4>极速物流</h4>
                <p>急速物流，急速送达</p>
              </li>
              <li>
                <div class="icon"></div>
                <h4>极速物流</h4>
                <p>急速物流，急速送达</p>
              </li>
              <li>
                <div class="icon"></div>
                <h4>极速物流</h4>
                <p>急速物流，急速送达</p>
              </li>
              <li>
                <div class="icon"></div>
                <h4>极速物流</h4>
                <p>急速物流，急速送达</p>
              </li>
              <li>
                <div class="icon"></div>
                <h4>极速物流</h4>
                <p>急速物流，急速送达</p>
              </li>
            </ul>
          </div>
          <!-- foot_middle -->
          <div class="foot_middle">
            <dl>
              <dt>购物指南</dt>
              <dd><a href="#">购物流程</a></dd>
              <dd><a href="#">会员介绍</a></dd>
              <dd><a href="#">生活旅行/团购</a></dd>
              <dd><a href="#">常见问题</a></dd>
              <dd><a href="#">大家电</a></dd>
              <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
              <dt>购物指南</dt>
              <dd><a href="#">购物流程</a></dd>
              <dd><a href="#">会员介绍</a></dd>
              <dd><a href="#">生活旅行/团购</a></dd>
              <dd><a href="#">常见问题</a></dd>
              <dd><a href="#">大家电</a></dd>
              <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
              <dt>购物指南</dt>
              <dd><a href="#">购物流程</a></dd>
              <dd><a href="#">会员介绍</a></dd>
              <dd><a href="#">生活旅行/团购</a></dd>
              <dd><a href="#">常见问题</a></dd>
              <dd><a href="#">大家电</a></dd>
              <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
              <dt>购物指南</dt>
              <dd><a href="#">购物流程</a></dd>
              <dd><a href="#">会员介绍</a></dd>
              <dd><a href="#">生活旅行/团购</a></dd>
              <dd><a href="#">常见问题</a></dd>
              <dd><a href="#">大家电</a></dd>
              <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
              <dt>购物指南</dt>
              <dd><a href="#">购物流程</a></dd>
              <dd><a href="#">会员介绍</a></dd>
              <dd><a href="#">生活旅行/团购</a></dd>
              <dd><a href="#">常见问题</a></dd>
              <dd><a href="#">大家电</a></dd>
              <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
              <dt>购物指南</dt>
              <dd>
                <img src="./img/wx_cz.jpg" alt="" />
                <p>品优购客户端</p>
              </dd>
            </dl>
          </div>
          <!-- foot_down -->
          <div class="foot_down">
            <p>
              <a href="#">关于我们</a><span>|</span> <a href="#">联系我们</a
              ><span>|</span> <a href="#">联系客服</a><span>|</span>
              <a href="#">商家入驻</a><span>|</span> <a href="#">营销中心</a
              ><span>|</span> <a href="#">手机品优购</a><span>|</span>
              <a href="#">友情链接</a><span>|</span> <a href="#">销售联盟</a
              ><span>|</span> <a href="#">品优购社区</a><span>|</span>
              <a href="#">品优购公益</a><span>|</span> <a href="#">English Site</a
              ><span>|</span>
              <a href="#">Contact U</a>
            </p>
            <p>
              地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096
              电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br />
              京ICP备08001421号京公网安备110108007702
            </p>
          </div>
      </div>
       
      </div>
    </div>
  </body>
</html>
